<!DOCTYPE html>
<html>
<head>
    <title>柱状图</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="barChart" width="400" height="300"></canvas>

    <script>
        // 获取 canvas 元素
        var canvas = document.getElementById('barChart');
        var ctx = canvas.getContext('2d');

        // 定义数据
        var data = [30, 50, 80, 120, 200]; // 柱状图的数据

        // 设置绘图参数
        var barWidth = 50; // 柱状条宽度
        var barSpacing = 20; // 柱状条间距
        var maxValue = Math.max(...data); // 数据中的最大值
        var chartHeight = canvas.height - 20; // 图表的高度，减去一些空白边距

        // 绘制柱状图
        for (var i = 0; i < data.length; i++) {
            var barHeight = (data[i] / maxValue) * chartHeight;
            var x = (barWidth + barSpacing) * i;
            var y = canvas.height - barHeight;

            // 绘制柱状条
            ctx.fillStyle = '#336699';
            ctx.fillRect(x, y, barWidth, barHeight);

            // 绘制柱状条上的数值
            ctx.fillStyle = '#000';
            ctx.fillText(data[i], x, y - 10);
        }
    </script>
</body>
</html>
